<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>应收账单</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="./css/comm.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="./css/chargeroomfee.css" />
    <style>
        .aui_formcontent {
            padding-right: 20px;
        }

        /* .aui-list {
            background: #f9f9f9;
        } */
        .editbtn {
            /* position: absolute;
            top: 2.2rem;
            right: 8px;
            z-index: 999; */
            width: 1rem;
            text-align: right;
        }

        .topbg {
            height: 80px;
            background: #289fff;
        }

        .item-inner-time {
            display: flex;
            flex-direction: row;
            align-content: stretch;
            justify-content: flex-end;
            align-items: center;
            flex-wrap: wrap;
        }

        .Moneytitle {
            display: flex;
            justify-content: space-between;
        }

        .item-inner-time.oneline {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .suoding {
            position: absolute;
            top: 24px;
            left: 13px;
            color: #aaa;
        }

        .popup-title {
            padding: 20px 20px 10px 20px;
            text-align: center;
            border-bottom: solid 1px #f0f0f0;
            font-weight: 600;
        }

        .winbtn {
            padding: 0px 20px;
            height: 34px;
            margin-left: 10px;

        }
        .newadd.van-button{
            height: 14px;
            background: none;
            padding: 0px;
            border:none;
        }
        .aui_bottombtn.cssgrey{
          background: #ccc !important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="mask_bg" v-on:click="doCloseRoom()" v-if="roomModel.IsRoomOpen"></div>
        <div class="choose_box" v-if="roomModel.IsRoomOpen">
            <span class="close_btn" v-on:click="doCloseRoom()">
                <i class="icon iconfont icon-guanbi"></i>
            </span>
            <div class="choose_room_title">选择关联房间
            </div>
            <div style="margin-bottom: 10px; overflow: hidden;">
                <div class="room_content_title">
                    <div v-on:click="doSelectAllRoom()"><input type="checkbox" v-bind:checked="isSelectAll"
                            class="aui-checkbox" style="margin-right: 10px;" />全选</div>
                    <div>共计{{allroomNum+1}}个资源</div>
                </div>
                <div class="choose_room_content">
                    <div v-on:click="doSelectRoom(item)" class="choose_room_item" v-for="item in roomModel.roomList">
                        <input v-bind:checked="item.isSelected" type="checkbox" class="aui-checkbox" />
                        <label>{{item.name}}</label>
                    </div>
                </div>
                <div class="room_content_bottom">
                    <van-button class="winbtn" v-on:click="doCloseRoom()" round type="default">取消</van-button>
                    <van-button class="winbtn" v-on:click="doCloseRoom()" round type="info">确定</van-button>
                </div>
            </div>
        </div>
        <div class="topbg">
        </div>
        <div class="shoufeimain" style="padding-bottom: 10rem;">
            <ul class="aui-list aui-form-list main_room_form">
                <li class="aui-list-item" style="padding-top: 15px; font-size: 0.85rem;">
                    {{roomModel.currentRelationName}}
                </li>
                <li class="aui-list-item">
                    <div class="zkss top-ziyuan">
                        {{roomModel.currentRoomName}}
                        <span style="padding: 0px 6px; background: #ddd; font-size: 0.65rem; border-radius: 5px;"
                            v-if='roomModel.currentRoomName&&roomLength'>+{{roomLength}}</span>
                    </div>
                </li>
                <li class="aui-list-item" style="padding-top: 5px; padding-bottom: 10px;">
                    <div class="aui-list-item-label">
                        已选{{roomModel.currentIdList.length}}户
                    </div>
                    <div v-if="allroomNum>0" class="aui-list-item-input" style="color: #828c9a;" v-on:click="doOpenChooseRoom()">
                        存在<span style="color:#ff7300; padding: 0px 3px;">{{allroomNum}}个</span>关联资源
                        <i v-if="!roomModel.IsRoomOpen" class="icon iconfont icon-down"></i>
                        <i v-if="roomModel.IsRoomOpen" class="icon iconfont icon-shangjiantou"></i>
                    </div>
                </li>

            </ul>
            <div class="aui_title zkss"
                style="padding-left:12px; padding-right: 12px; padding-top: 1.2rem!important; font-size:0.8rem;"
               >
                <div style=" width: 100%; display: inline-flex; justify-content: space-between;">
                    <div>
                        <span>应收账单
                            <i class="aui-iconfont aui-icon-question aui-font-size-12"
                                style="vertical-align: text-top;margin-left: 5px; color: #aaa; position: unset;"
                                v-on:click="onShowPopover()"></i>
                        </span>
                    </div>
                    <div>
                        <van-popover
                            v-model="showIcon"
                            trigger="click"
                            :actions="actions"
                            @select="onSelectAdd"
                            v-if="FormType&&(showAddTempFee||showAddCycleFee)">
                            <template #reference>
                                <van-button class="newadd"><i class="icon iconfont icon-xinzeng" style="margin-left: 10px;"></i></van-button>
                            </template>
                        </van-popover>

                        <i v-if="FormType&&showDelFee" class="icon iconfont icon-shanchu" v-on:click="chooseDelete()" style="margin-left: 15px;"></i>
                        <i v-if="!FormType&&showDelFee" class="icon iconfont icon-guanbi" v-on:click="closeDelete()" style="margin-left: 15px;"></i>
                    </div>
                </div>
            </div>
            <div v-if="roomModel.feeList.length>0" v-for="(itemb,index) in roomModel.feeList" class="aui-content contentBox"
                style=" margin-bottom: 15px; padding-bottom: 0px;">
                <div class="aui_list inside list-sidebor">
                    <ul class="aui-list aui-form-list summary-list">
                        <div class="ziyuaname" v-on:click="do_select_room(itemb,index)">
                            <input type="checkbox" v-bind:checked="itemb.Selected" class="aui-radio fl"
                                style=" margin-right: 10px;">
                            {{itemb.FullName}}
                        </div>
                        <div class="summary_box" style="margin-bottom: 0px;">
                            <div class="summary_item" v-for="(item,index) in itemb.list">
                                <div class="ul-title ul-title_yfzd" v-on:click="choose_fee(item,index)">
                                    <div class="Moneytitle">
                                        <input v-bind:id="'fee_'+item.id"
                                            v-if="item.IsCanSelect"
                                            type="checkbox" class="aui-radio fl" v-bind:checked='item.Selected'
                                            style="margin-left: 6px; margin-top:8px;">
                                        <i v-else class="icon iconfont icon-suoding suoding"></i>
                                        <div class="yfzd_con_input">
                                            {{item.Name}}
                                        </div>
                                        <div class="countMony" style=" padding-top: 8px; text-align: right; ">
                                            ￥{{item.TotalCost.toFixed(2)}}
                                        </div>
                                    </div>
                                    <li class="aui-list-item aui-list-item-time" style="margin-top: 5px;">
                                        <div class="aui-list-item-inner item-inner-time oneline">
                                            <div class="label-content content-time" style=" text-align: right;">
                                                {{item.StartTime==''?'--':item.StartTime}} 至
                                                {{item.EndTime==''?'--':item.EndTime}}（{{item.CalMonthNumber}}个月）
                                            </div>
                                            <div v-if="item.IsCanSelect&&FormType&&showEditFee"
                                                class="fr countMony editbtn" v-on:click="do_edit_fee(item)">
                                                <i class="icon iconfont icon-bianji11"></i>
                                            </div>
                                        </div>
                                    </li>
                                </div>

                                <div class="cl"></div>
                                <div class="zc_type_box" v-if="item.DiscountCost>0
                                ||item.BreakTotalCost>0
                                ||item.TotalPayCost>0
                                ||item.StartEndPoint">
                                    <div class="zc_type_style po_youhui" v-if="item.DiscountCost">
                                        优惠:￥{{item.DiscountCost.toFixed(2)}}
                                    </div>
                                    <div class="cl"></div>
                                    <div class="zc_type_style po_weiyue" v-if="item.BreakTotalCost">
                                        违约金:￥{{item.BreakTotalCost.toFixed(2)}}
                                    </div>
                                    <div class="cl"></div>
                                    <div class="zc_type_style" v-if="item.TotalPayCost>0">
                                        已收:￥{{item.TotalPayCost.toFixed(2)}}
                                    </div>
                                    <div class="cl"></div>
                                    <div class="zc_type_style" v-if="item.StartEndPoint">
                                        用量:{{item.StartEndPoint}} 读数:{{item.StartPoint}}
                                    </div>
                                </div>

                                <li class="aui-list-item" v-if="false">
                                    <div class="aui-list-item-inner" style="border-top: 0px;">
                                        <div class="aui-list-item-label">
                                            终止日期
                                        </div>
                                        <div v-if="item.CanChangeEndTime" class="aui-list-item-input datetime_box">
                                            <input style="color:#333;" class="time_btn" type="text" readonly
                                                v-model="item.EndTime" v-bind:data-value="item.EndTime"
                                                v-bind:data_id="item.ID" />
                                        </div>
                                        <div v-if="!item.CanChangeEndTime" class="aui-list-item-input txtright">
                                            {{item.EndTime}}
                                        </div>
                                    </div>
                                </li>
                            </div>
                        </div>
                    </ul>
                    <div class="cl"></div>
                </div>
                <!-- <div v-if="itemb.list.length<=0" class="aui_list inside list-sidebor">
                    <ul class="aui-list aui-form-list summary-list">
                        <div class="emptyField grey">
                            暂无账单
                        </div>
                    </ul>
                </div> -->
            </div>
            <div class="noinfo" id="noorder" v-if="roomModel.feeList.length<=0">
                <img src="../image/index/noinfomsg_icon.png" alt="" />
                <h5><br />暂无相关数据</h5>
            </div>
        </div>
        <div class="bottomfixed" v-if="list.length>0&&FormType">
            <div class="select_all">
                <label>
                    <span>优惠：<span style="color: rgb(255, 115, 0);">-</span>￥{{TotalDiscountCost.toFixed(2)}};</span>
                    <span>违约金：<span style="color: rgb(47, 151, 55);">+</span>￥{{TotalBreakCost.toFixed(2)}};</span>
                    <span>已收：<span style="color: rgb(255, 115, 0);">-</span>￥{{TotalChargedCost.toFixed(2)}};</span>
                </label>
            </div>
            <div class="bottom">
                <div class="chooseAll">
                    <label style="position: absolute; left:0; width: 120px;" v-on:click="select_all()">
                        <input style="left:14px;top:2px;" class="aui-radio" type="radio" v-bind:checked="allchecked"
                            name="radio">
                        <label style="padding-left: 15px;">
                            已选: <span>({{TotalFeeCount}})</span>
                        </label>
                    </label>
                </div>
                <div class="aui_bottombtn rightbtn" v-bind:class="[showChargeFee?'':'cssgrey']" v-on:click="do_pay()">收费 ￥{{HeJiCost.toFixed(2)}}<i
                        class="icon iconfont icon-xiayibu"
                        style="float: right; margin-right: 15px; position: relative; top:-1px"></i></div>
            </div>
        </div>
        <div class="bottomfixed" style="height: 3.5rem;" v-if="list.length>0&&!FormType">
            <div class="bottom" @click="doRemoveFee()">
                <div class="aui_bottombtn">删除账单</div>
            </div>
        </div>
        <van-popup v-model:show="showPopover" round teleport="body" style="width: 70%;height: 180px;">
            <div>
                <div class="popup-title">锁定说明</div>
                <div class="aui-padded-15">应收账单处于锁定状态下，禁止收费操作。包含：催收中、手动锁定、优惠审批中等情况。</div>
            </div>
        </van-popup>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript" src="js/chargeroomfee.js"></script>

</html>
